<template>
    <div>
        <div>
            账号:<input type="text" @focus="hiddenAccFlag" v-model="loginForm.account">
            <span class="acc-err"  v-show="accErr">账号输入错误!</span>
        </div>
        <div>
            密码:<input type="text" @focus="hiddenPwdFlag" v-model="loginForm.password">
            <span class="pwd-err" v-show="pwdErr">密码输入错误!</span>
        </div>
    </div>
    <!-- <router-link to="/home">登录</router-link> -->
    <!--  -->
    <button @click="handler">登录</button>
</template>

<script setup>
import { useRouter,useRoute } from 'vue-router';
import { watch, ref } from 'vue';

// 获取整个路由对象
const router = useRouter();

const loginForm = ref({
  account:'',
  password: ''
});

const accErr = ref(false);
const pwdErr = ref(false);


watch(loginForm, (newValue, oldValue)=>{
  console.log('newValue=>', newValue, '  oldValue=>', oldValue);
  
  if(/\d+/.test(newValue.account)) accErr.value=true;
  
  if(!(/^[A-Za-z]{6,8}$/.test(newValue.password))) pwdErr.value=true;
},{
  deep:false
});

const hiddenAccFlag = e => {
  accErr.value = false;
}

const hiddenPwdFlag = e => {
  pwdErr.value = false;
}

const handler = e =>{
    // 事件处理函数中执行push|replace
    // console.log('router=>',router);
    // console.log('route=>',route);
    router.push('/home');

}
</script>

<style lang="scss" scoped>

</style>